<template>
	<view>
		<view class="button-container">
			<u-button v-for="(item, index) in nav" @click="caseHandler(index)" type="primary" class="nav-button"
				:class="idx==index?'choose':null" :text="item">{{formatShowCateName(item,index)}}</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker ref="uPicker" :show="show" :columns="columns" @confirm="confirmPicker" @cancel="cancelPicker()"
			:closeOnClickOverlay="true" @close="closePicker()"></u-picker>
		<view class="list-item" v-for="(v,k) in info">
			<view class="serial-num">
				<view class="iconfont iconhehuoren" :class="k<3? 'topOne': null"></view>
			</view>
			<uni-list-chat style="width: 90%;" :title="v.nickname" avatar-circle :avatar="v.avatar"
				badge-positon="left">
				<view class="chat-custom-right">
					<text v-if="idx<3" class="chat-custom-text">{{infoTitle}}:<span
							style="display: inline-block; width: 60rpx;">{{formatCountShow(v.count)}}</span></text>
					<text v-else class="chat-custom-text">{{infoTitle}}:<span
							style="display: inline-block; width: 60rpx;">{{formatCountShow(v.sum)}}</span></text>
				</view>
			</uni-list-chat>
		</view>
		<tabbar />
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar"
	import {
		getCateGoryListAny
	} from "@/utils/api/category.js"
	import {
		overallRanking,
		graspRanking,
		lengthTimeRanking,
		categorizationRanking
	} from "@/utils/api/top.js"
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				nav: ["总榜", "掌握榜", "分类榜", "时长榜"],
				info: {},
				idx: 0,
				cateList: [],
				columns: [
					[]
				],
				CateID: 1,
				showCateName: "",
				show: false,
				infoTitle: "累计刷题"
			};

		},
		onLoad() {
			this.OverallRanking()
			this.getCategoryList()
		},
		methods: {
			async confirmPicker(e) {
				await this.changeCateID(e.value[0])
				this.show = false
			},
			cancelPicker() {
				this.show = false
			},
			closePicker() {
				this.show = false
			},
			changeCateID(cateName) {
				this.cateList.forEach(item => {
					if (item.CateName == cateName) {
						this.CateID = item.ID
						this.showCateName = item.CateName
						this.CategorizationRanking()
					}
				})
			},
			formatCountShow(count) {
				return String(count).padStart(5, ' ').replace(/ /g, '\u00A0');
			},
			formatShowCateName(name, index) {
				if (index == 2 && this.idx == index) {
					return this.showCateName
				}
				return name
			},
			async getCategoryList() {
				await getCateGoryListAny({
					level: 1
				}).then(res => {
					if (res.data.code == 0) {
						this.cateList = res.data.data
						this.showCateName = this.cateList[0].CateName
					}
				})

				this.cateList.forEach((item, index) => {
					this.columns[0].push(item.CateName)
				})
			},
			caseHandler(index = 0) {
				switch (index) {
					case 0:
						this.idx = 0
						this.OverallRanking()
						break;
					case 1:
						this.idx = 1
						this.GraspRanking(1)
						break;
					case 2:
						this.idx = 2
						this.show = true
						break;
					case 3:
						this.idx = 3
						this.LengthTimeRanking()
						break;
					default:
						this.showToast({
							type: 'error',
							message: "一弦一柱思华年",
						})
						break;
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			OverallRanking() { //总榜
				this.infoTitle = "累计刷题"
				overallRanking().then(res => {
					if (res.data.code == 0) {
						this.info = res.data.data
					}
				})
			},
			GraspRanking() { //掌握榜
				this.infoTitle = "累计刷题"
				graspRanking().then(res => {
					this.info = res.data.data
				})
			},
			CategorizationRanking() { //分类榜index
				this.infoTitle = "累计刷题"
				categorizationRanking({
					id: this.CateID,
				}).then(res => {
					this.info = res.data.data
				})
			},
			LengthTimeRanking() { //时长榜
				this.infoTitle = "累计时长"
				lengthTimeRanking().then(res => {
					this.info = res.data.data
				})
			},

		}
	}
</script>

<style lang="scss">
	.selectbox {
		width: 100%;
		height: 100%;
	}

	.css-select {
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: #007bff;
		color: #fff;
		font-size: 15px;
		align-items: center;
		border: none;
		-webkit-appearance: none;
	}

	.css-select-size {
		font-size: 17px;
	}

	.rank-title {
		width: 100%;
		line-height: 40px;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 20rpx;

		.serial-num {
			width: 10%;
			text-align: center;

			.iconfont {
				font-size: 45rpx;
			}

			.topOne {
				font-size: 50rpx;
				color: #f4d857;
			}
		}
	}

	.uni-list--border:after {
		display: none !important;
		height: 0 !important;
		transform: scaleY(0);
	}

	.uni-list-chat__container {
		padding-left: 0 !important;
	}

	.chat-custom-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		text-align: right;
		font-size: 12px;
		color: #999;
	}

	.button-container {
		margin-top: 20px;
		text-align: center;
		display: flex;
		justify-content: space-evenly;
		height: 50px;
	}

	.nav-button {
		margin: 5px;
		height: 40px;
		font-size: 15px;
		border-radius: 5px;
		cursor: pointer;
	}

	.nav-button {
		width: 160rpx;
		line-height: 40px;
		color: #fff;
	}

	.choose {
		background-color: #28a745;
		color: #fff !important;
	}
</style>